<template>
  <div class="">
    <div class="wrap">
      <div class="recommend_con">
        <ul class="clearfix recommend_con_ul">
        <p class="con_p">热门推荐</p>
          <li>
            <!-- <div class="titletO">旋律控 • 人声与电音的完美邂逅♫"</div> -->
            <div class="con_fn">
              <div class="bofang clearfix">
                <div>
                  <i class="iconfont">&#xe600;</i><span class="span_num">6335万</span>
                </div>
                <div class="bo_div">
                <i class="iconfont">&#xe634;</i>
                </div>
              </div>
              <img :src="recommend_Img" alt="">
              <div class="fn_div"><a title="旋律控 • 人声与电音的完美邂逅♫">旋律控 • 人声与电音的完美邂逅♫</a></div>
            </div>
          </li>
          <li>
            <div class="con_fn">
              <div class="bofang clearfix">
                <div>
                  <i class="iconfont">&#xe600;</i><span class="span_num">6335万</span>
                </div>
                <div class="bo_div">
                <i class="iconfont">&#xe634;</i>
                </div>
              </div>
              <img :src="recommend_Img" alt="">
              <div class="fn_div"><a title="旋律控 • 人声与电音的完美邂逅♫">旋律控 • 人声与电音的完美邂逅♫</a></div>
            </div>
          </li>
          <li>
            <div class="con_fn">
              <div class="bofang clearfix">
                <div>
                  <i class="iconfont">&#xe600;</i><span class="span_num">6335万</span>
                </div>
                <div class="bo_div">
                <i class="iconfont">&#xe634;</i>
                </div>
              </div>
              <img :src="recommend_Img" alt="">
              <div class="fn_div"><a title="旋律控 • 人声与电音的完美邂逅♫">旋律控 • 人声与电音的完美邂逅♫</a></div>
            </div>
          </li>
          <li>
            <div class="con_fn">
              <div class="bofang clearfix">
                <div>
                  <i class="iconfont">&#xe600;</i><span class="span_num">6335万</span>
                </div>
                <div class="bo_div">
                <i class="iconfont">&#xe634;</i>
                </div>
              </div>
              <img :src="recommend_Img" alt="">
              <div class="fn_div"><a title="旋律控 • 人声与电音的完美邂逅♫">旋律控 • 人声与电音的完美邂逅♫</a></div>
            </div>
          </li>
          <li>
            <div class="con_fn">
              <div class="bofang clearfix">
                <div>
                  <i class="iconfont">&#xe600;</i><span class="span_num">6335万</span>
                </div>
                <div class="bo_div">
                <i class="iconfont">&#xe634;</i>
                </div>
              </div>
              <img :src="recommend_Img" alt="" >
              <div class="fn_div"><a title="旋律控 • 人声与电音的完美邂逅♫">旋律控 • 人声与电音的完美邂逅♫</a></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      'recommend_Img': '../static/image/109951163871443133.jpg'
    }
  }
}
</script>
<style scoped>
.titletO {
  width: 185px;
  height: 22px;
  padding-left: 5px;
  position: absolute;
  bottom: 42px;
  left: 42px;
  color: #333;
  font-size: 12px;
  border: 1px solid #333;
  background: #ffffff;
  z-index: 999;
}
.recommend_con li {
  position: relative;
  cursor: pointer;
  width: 140px;
  height: 192px;
  float: left;
  margin-left: 44px;
}
.recommend_con li:nth-of-type(4n-3){
  margin: 0
}
.recommend_con p.con_p {
  color: #333;
  font-size: 18px;
  margin-bottom: 15px;
  margin-top: 10px;
}
.recommend_con_ul {
  width: 750px;
  height: 600px;
  overflow-y: scroll
}
.con_fn a {
  font-size: 14px;
  color: #000;
  line-height: 20px;
  display: block;
}
.con_fn .fn_div {
  position: absolute;
  bottom: 0px;
  font-size: 14px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 44px;
}
.con_fn .fn_div a:hover {
  text-decoration:underline
}
.con_fn {
  width: 100%;
  height: 100%;
  position: relative;
}
.bofang {
  padding: 0 10px;
  color: #eae8e8;
  background: #2726266e;
  position: absolute;
  bottom: 53px;
  width: 100%;
  font-size: 13px;
}
.bofang  i {
  font-size: 18px;

}
.bofang div {
  float: left;
}
.bofang .bo_div {
  float: right;
}
.span_num {
  margin-left: 5px;
  position: relative;
  top: -2px;
}
</style>
